<template>
    <div class="content">
      <div ref="charts" style="width: 100%; height: 1000px"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import zhongguo from "@/assets/love.json";
  import beijing from "@/assets/beijin.json";
  // import { loopShowTooltip } from "../util/tooltip-auto-show-vue"; // 文件位置参考自己的位置
  // import { autoHover } from "../util/tools.js";
  
  export default {
    data() {
      return {
        data: [
          { name: "朝阳区", value: [116.54, 39.92, 13097] },
          { name: "顺义区", value: [116.66, 40.13, 4707] },
          { name: "通州区", value: [116.66, 39.91, 4077] },
          { name: "西城区", value: [116.73, 40.04, 3045] },
          { name: "丰台区", value: [116.29, 39.85, 4035] },
          { name: "东城区", value: [116.42, 39.93, 5046] },
          { name: "昌平区", value: [116.23, 40.22, 1023] },
          { name: "大兴区", value: [116.34, 39.72, 304] },
          { name: "海淀区", value: [116.3, 39.96, 2304] },
          { name: "平谷区", value: [117.12, 40.14, 4302] },
          { name: "石景区", value: [116.4, 39.9, 4305] },
          { name: "门头沟区", value: [116.1, 39.92, 1023] },
          { name: "怀柔区", value: [116.63, 40.3, 6504] },
          { name: "经开区", value: [116.51, 39.77, 4302] },
          { name: "密云区", value: [116.83, 40.38, 3045] },
          { name: "延庆区", value: [115.98, 40.43, 4056] },
          { name: "房山区", value: [116.13, 39.72, 6045] },
        ],
        option: {},
        charts: "",
        index: -1,
      };
    },
    created() {
      this.$nextTick(() => {
        this.initCharts();
      });
    },
    methods: {
      initCharts() {
        const charts = echarts.init(this.$refs["charts"]);
        this.charts = charts;
        this.mapActive();
        charts.on("click", ({ name }) => {
          if (name === "北京市") {
            // 修改option的配置，可以继续自定义
            this.option.geo.zoom = 0.8;
            // 就像上面提到的，这里必须要和注册地图时的名字一致
            this.option.geo.map = "beijing";
            // 注册地图
            echarts.registerMap("beijing", beijing);
            // 重新渲染
            charts.setOption(this.option, true);
          }
        });
        //  autoHover(myChart, this.option, 4, 3000); // 参数分别为：容器，配置，轮播数量，轮播间隔时间
        this.option = {
          // 背景颜色
          backgroundColor: "#404a59",
          // 提示浮窗样式
          tooltip: {
            show: true,
            trigger: "item",
            alwaysShowContent: false,
            backgroundColor: "#0C121C",
            borderColor: "rgba(0, 0, 0, 0.16);",
            hideDelay: 100,
            triggerOn: "mousemove",
            enterable: true,
            textStyle: {
              color: "#DADADA",
              fontSize: "12",
              width: 20,
              height: 30,
              overflow: "break",
            },
            showDelay: 100,
          },
          // 地图配置
          geo: {
            map: "china",
            roam: true,
            label: {
              // 通常状态下的样式
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              // 鼠标放上去的样式
              emphasis: {
                textStyle: {
                  color: "pink",
                },
              },
            },
            // 地图区域的样式设置
            itemStyle: {
              normal: {
                borderColor: "rgba(147, 235, 248, 1)",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                shadowColor: "rgba(128, 217, 248, 1)",
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 10,
              },
              // 鼠标放上去高亮的样式
              emphasis: {
                areaColor: "#389BB7",
                borderWidth: 0,
              },
            },
          },
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin",
              legendHoverLink: true,
              symbolSize: [60, 60],
              // 这里渲染标志里的内容以及样式
              label: {
                show: true,
                formatter(value) {
                  return value.data.value[2];
                },
                color: "#fff",
              },
            //   // 标志的样式
            //   itemStyle: {
            //     normal: {
            //       color: "rgba(255,0,0,.7)",
            //       shadowBlur: 2,
            //       shadowColor: "D8BC37",
            //     },
            //   },
              // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
              // 至于如何展示，完全是靠上面的formatter来自己定义的
              data: this.data,
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke",
              },
              hoverAnimation: true,
              zlevel: 1,
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              effectType: "ripple",
              showEffectOn: "render",
              rippleEffect: {
                period: 10,
                scale: 10,
                brushType: "fill",
              },
  
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: "rgba(255, 235, 59, .7)",
                  shadowBlur: 10,
                  shadowColor: "#333",
                },
              },
              zlevel: 1,
              data: this.data,
            },
            {
              type: "map",
              geoIndex: 0,
              data: this.data,
            },
          ],
          graphic: {
            // 水印类型
            type: "text",
            // 相对于容器的位置
            left: "10%",
            top: "10%",
            // 样式设置
            style: {
              // 文本内容
              text: "小小地图，可笑可笑",
              // 字体粗细、大小、字体
              font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              // 字体颜色
              fill: "#fff",
            },
          },
          visualMap: {
            // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
            show: true,
            // 最小值和最大值，必须指定
            min: 0,
            max: 6000,
            // 位置
            left: "10%",
            bottom: "10%",
            // 是否展示滑块
            calculable: true,
            // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
            seriesIndex: [2],
            // 从下到上的颜色
            inRange: {
              color: ["red", "orange", "green"],
            },
            //字体颜色
            textStyle: {
              color: "#fff",
              map: "china",
            },
          },
        };
        echarts.registerMap("china", zhongguo);
  
        charts.setOption(this.option);
      },
  
      mapActive() {
        const dataLength = this.data.length;
        // 用定时器控制高亮
        this.mTime = setInterval(() => {
          // 清除之前的高亮
          this.charts.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index,
          });
          this.index++;
          // 当前下标高亮
          this.charts.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.index,
          });
          this.charts.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: this.index,
          });
          if (this.index > dataLength) {
            this.index = 0;
          }
        }, 2000);
      },
    },
  };
  </script>
  